<template>
  <div class="app-container">
    <el-row :gutter="10" style="margin-bottom:60px">
      <el-col :span="4">
        <el-card  style="color:#67C23A">
          <div><i class="el-icon-bank-card"/>游客量</div>
          <div style="padding:10px 0;text-align:center;font-weight:bold">{{vueData.tourists}}人</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card  style="color:#5c7bd9">
          <div><i class="el-icon-mobile"/>综合营收</div>
          <div style="padding:10px 0;text-align:center;font-weight:bold">{{vueData.multiplePurpose}}元</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card style="color:#409EFF">
          <div><i class="el-icon-user"/>门票</div>
          <div style="padding:10px 0;text-align:center;font-weight:bold">{{vueData.gateMoney}}元</div>
        </el-card>
      </el-col>

      <el-col :span="4">
        <el-card style="color:#b49976">
          <div><i class="el-icon-user-solid"/>停车场</div>
          <div style="padding:10px 0;text-align:center;font-weight:bold">{{vueData.parkade}}元</div>
        </el-card>
      </el-col>

      <el-col :span="4">
        <el-card style="color:#E6A23C">
          <div><i class="el-icon-user-solid"/>二消</div>
          <div style="padding:10px 0;text-align:center;font-weight:bold">{{vueData.secondRevenue}}元</div>
        </el-card>
      </el-col>


      <el-col :span="4">
        <el-card style="color:#303133;">
          <div style="margin-bottom: 5px;font-weight: bold;font-size: 15px"><i class="el-icon-date"/>选择日期</div>
          <el-date-picker
            v-model="rq"
            type="date"
            placeholder="选择日期"
            :clearable="false"
            :editable="false"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="handleDateChange">
          </el-date-picker>
        </el-card>
      </el-col>

    </el-row>

    <el-row :gutter="10">
      <el-col :span="8">
        <div id="pie01" ></div>
      </el-col>
      <el-col :span="8">
        <div id="pie02"></div>
      </el-col>
      <el-col :span="8">
        <div id="pie03"></div>
      </el-col>
    </el-row>

<!--    <el-row :gutter="10">-->
<!--      <el-col :span="12">-->
<!--        <div id="line01"></div>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <div id="bar01"></div>-->
<!--      </el-col>-->
<!--    </el-row>-->



  </div>
</template>

<script>
import {initBb, initHome} from "@/api/kws/bbday";
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      // 遮罩层
      loading: true,
      vueData: {},
      subtext:'每日数据',
      rq: new Date(),
      pie01Chart:null,
      pie02Chart:null,
      pie03Chart:null,
      // 弹出层标题
    };
  },

  mounted(){
    this.initChart(); // 初始化图表
  },
  methods: {
    //日期改变，重新加载页面
    handleDateChange(rq){
      this.rq = rq;
      if (this.pie01Chart) {
        this.pie01Chart.dispose(); // 销毁现有的图表实例
      }
      if (this.pie02Chart) {
        this.pie02Chart.dispose(); // 销毁现有的图表实例
      }
      if (this.pie03Chart) {
        this.pie03Chart.dispose(); // 销毁现有的图表实例
      }

      this.initChart(); // 重新初始化图表
    },
    //初始化chart
    initChart(){
      //pie01中放了饼图
      let pie01Dom = document.getElementById('pie01');
      this.pie01Chart = echarts.init(pie01Dom);
      let pie01Option;
      pie01Option = {
        title: {
          text: '游客量',
          subtext: this.subtext,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 460
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '游客量',
            type: 'pie',
            // roseType: 'radius',
            radius: [20, 95],
            center: ['50%', '40%'],

            data: [
              // {value: 80, name: '刷卡'},
              // {value: 20, name: '买票'},
              // {value: 20, name: '免票'},
            ],//数据pie
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  if (params) {
                    return `${params.name}(` +`${params.value})`+ `\n\n${params.percent === undefined ? 0 : params.percent}%`
                  }
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 个';
              }
            }
          }
        ]
      };
      // pie01Chart.setOption(pie01Option);

      //pie02中放了饼图
      let pie02Dom = document.getElementById('pie02');
      this.pie02Chart= echarts.init(pie02Dom);
      let pie02Option;
      pie02Option = {
        title: {
          text: '门票',
          subtext: this.subtext,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 460
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '门票',
            type: 'pie',
            // roseType: 'radius',
            radius: [65, 98],
            center: ['50%', '40%'],
            data: [
              // {value: 80, name: '成人'},
              // {value: 20, name: '儿童'},
              // {value: 20, name: '双人'},
              // {value: 20, name: '一大一小'},
              // {value: 20, name: '两大一小'},
              // {value: 20, name: '线下成人'},
              // {value: 20, name: '线下儿童'},
            ],//数据pie
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  if (params) {
                    return `${params.name}(` +`${params.value})`+ `\n\n${params.percent === undefined ? 0 : params.percent}%`
                  }
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 个';
              }
            }
          }
        ]
      };
      // pie02Chart.setOption(pie02Option);

      // pie03
      let pie03Dom = document.getElementById('pie03');
      this.pie03Chart = echarts.init(pie03Dom);
      let pie03Option;
      pie03Option = {
        title: {
          text: '二消',
          subtext: this.subtext,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 430
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '二消',
            type: 'pie',
            radius: [40, 110],
            center: ['50%', '42%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 9
            },
            label: {
              normal: {

                show: true,
                position: 'outside',
                formatter: (params) => {
                  if (params) {
                    return `${params.name}(` +`${params.value})`+ `\n\n${params.percent === undefined ? 0 : params.percent}%`
                  }
                  return ''
                }
              }
            },
            data: [
              // { value: 40, name: '朐茶' },
              // { value: 38, name: '五谷园' },
              // { value: 32, name: '讲解' },
              // { value: 30, name: '祈福牌自助' },
              // { value: 28, name: '小吃车' },
              // { value: 26, name: '研学团建' },
              // { value: 22, name: '草地业态' },
              // { value: 18, name: '场地租赁' },
              // { value: 22, name: '活动集市' }
            ]
          }
        ]
      };

      // pie03Chart.setOption(pie03Option);

      // 构造要发送到后台的数据
      const querData = {
        id: 1,
        rq: this.rq
      };

      /** 页面初始化数据 */
      initHome(querData).then(response => {
        this.loading = true;
        //设置头部内容
        this.vueData=response.data.vueData;

        pie01Option.series[0].data=response.data.pie01s;
        pie02Option.series[0].data=response.data.pie02s;
        pie03Option.series[0].data=response.data.pie03s;
        //设置option
        this.pie01Chart.setOption(pie01Option);
        this.pie02Chart.setOption(pie02Option);
        this.pie03Chart.setOption(pie03Option);
        this.loading = false;
      });

    }
  }
};
</script>
<style lang="scss" scoped>

#line01,#bar01, #pie01,#pie02,#pie03 {
  margin-top: 70px;
  width: 100%;
  height: 500px;
  transform: translateY(-40px);
}
</style>
